import React, { useState, useEffect } from 'react'
import { Link } from "react-router-dom";
import { imgPre } from '../../request/http';
import { reqCate, reqCateGoods } from '../../request/api'
import { SideBar } from 'antd-mobile'
import './Cate.less'
import Header from '../../components/Header/Header';

const Cate = () => {
  //1.初始化状态
  const [goodsCate, setGoodsCate] = useState([]);
  const [goods, setGoods] = useState([]);
  const [fid, setFid] = useState(1);
  // 2.进入页面发请求
  useEffect(() => {
    // 分类
    reqCate().then(res => {
      setGoodsCate(res.data.list);
    });
    // 分类商品
    reqCateGoods({fid}).then(res => {
      setGoods(res.data.list);
    })
  },[fid])
  return (
    <div className="cate">
      <Header title="商品分类" back></Header>
      {/* 3.展示内容 */}
      {/* 3.1左边导航栏 */}
      <div className="list">
      <SideBar defaultActiveKey='1' onChange={(e) => setFid(e)}>
        {goodsCate.map(item => (
          <SideBar.Item  key={item.id} title={item.catename} />
        ))}
      </SideBar>
    </div>
      {/* 3.2对应内容区域 */}
      <div className="content">
      {goods.map((item, index) => {
        return <Link to={'/detail/1/'+ item.id} className='item' key={item.id}>
          <div className='left'>
            <img src={imgPre + item.img} alt="" />
          </div>
          <div className='right'>
            <h3>{item.goodsname}</h3>
            <div><span>{'￥' + item.price}</span><i>{'￥' + item.market_price}</i></div>
            <p>{item.description}</p>
          </div>
        </Link>
      })}
    </div>
    </div>
  )
}
export default Cate;